<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Guide | Riant</title>
    <meta name="description" content="Highly configurable development and build tools for react.">
    
    
    <link rel="preload" href="/riant/assets/css/0.styles.05fc49ce.css" as="style"><link rel="preload" href="/riant/assets/js/app.c1a7218f.js" as="script"><link rel="preload" href="/riant/assets/js/2.d60fca52.js" as="script"><link rel="preload" href="/riant/assets/js/7.57f72445.js" as="script"><link rel="prefetch" href="/riant/assets/js/10.29a53b58.js"><link rel="prefetch" href="/riant/assets/js/11.877d71ba.js"><link rel="prefetch" href="/riant/assets/js/3.b8eea38a.js"><link rel="prefetch" href="/riant/assets/js/4.2ff4637c.js"><link rel="prefetch" href="/riant/assets/js/5.c27fa50a.js"><link rel="prefetch" href="/riant/assets/js/6.5712c03c.js"><link rel="prefetch" href="/riant/assets/js/8.c4debeb8.js"><link rel="prefetch" href="/riant/assets/js/9.90554817.js">
    <link rel="stylesheet" href="/riant/assets/css/0.styles.05fc49ce.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="navbar-container"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/riant/" class="home-link router-link-active"><img src="/riant/logo.svg" alt="Riant" class="logo"> <span class="site-name can-hide">Riant</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/riant/guide/" class="nav-link router-link-exact-active router-link-active">Guide</a></div><div class="nav-item"><a href="/riant/config/" class="nav-link">Config Reference</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/riant/guide/" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----> <a href="/riant/zh/guide/" class="nav-link">简体中文</a></li></ul></div></div> <a href="https://github.com/fengxinming/riant" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></div></header> <div class="page-container"><div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/riant/guide/" class="nav-link router-link-exact-active router-link-active">Guide</a></div><div class="nav-item"><a href="/riant/config/" class="nav-link">Config Reference</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Language Menu" class="dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/riant/guide/" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----> <a href="/riant/zh/guide/" class="nav-link">简体中文</a></li></ul></div></div> <a href="https://github.com/fengxinming/riant" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/riant/guide/#riant-scripts" class="sidebar-link">riant-scripts</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/riant/guide/#introduction" class="sidebar-link">Introduction</a></li><li class="sidebar-sub-header"><a href="/riant/guide/#how-it-works" class="sidebar-link">How it works</a></li></ul></li><li><a href="/riant/guide/#template" class="sidebar-link">Template</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/riant/guide/#create-project" class="sidebar-link">Create project</a></li><li class="sidebar-sub-header"><a href="/riant/guide/#templates" class="sidebar-link">Templates</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="guide"><a href="#guide" class="header-anchor">#</a> Guide</h1> <h2 id="riant-scripts"><a href="#riant-scripts" class="header-anchor">#</a> riant-scripts</h2> <h3 id="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h3> <p><code>riant-scripts</code> is a React build tool that base on <code>react-scripts</code> to be used for a React project，you can configure webpack easily without using 'eject' and without creating a fork of the react-scripts。</p> <h3 id="how-it-works"><a href="#how-it-works" class="header-anchor">#</a> How it works</h3> <blockquote><p>PS：That is much better to create a project with <code>create-react-app</code></p></blockquote> <h4 id="installation"><a href="#installation" class="header-anchor">#</a> Installation</h4> <div class="language-bash extra-class"><pre class="language-bash"><code>$ <span class="token function">npm</span> <span class="token function">install</span> riant-scripts --save-dev
</code></pre></div><h4 id="change-package-json"><a href="#change-package-json" class="header-anchor">#</a> Change package.json</h4> <p>Change npm scripts in package.json</p> <div class="language-diff extra-class"><pre class="language-diff"><code><span class="token unchanged">  /* package.json */
</span>
<span class="token unchanged">  &quot;scripts&quot;: {
</span><span class="token deleted-sign deleted">-   &quot;start&quot;: &quot;react-scripts start&quot;,
</span><span class="token inserted-sign inserted">+   &quot;start&quot;: &quot;riant-scripts start&quot;,
</span><span class="token deleted-sign deleted">-   &quot;build&quot;: &quot;react-scripts build&quot;,
</span><span class="token inserted-sign inserted">+   &quot;build&quot;: &quot;riant-scripts build&quot;,
</span><span class="token deleted-sign deleted">-   &quot;test&quot;: &quot;react-scripts test --env=jsdom&quot;,
</span><span class="token inserted-sign inserted">+   &quot;test&quot;: &quot;riant-scripts test --env=jsdom&quot;,
</span><span class="token unchanged">    &quot;eject&quot;: &quot;react-scripts eject&quot;
</span>}
</code></pre></div><p>PS：Do not change <code>eject</code> script。That gets run only once for a project, after which you are given full control over the webpack configuration making riant-scripts no longer required. There are no configuration options to rewire for the eject script.</p> <h4 id="create-riant-config-js"><a href="#create-riant-config-js" class="header-anchor">#</a> Create riant.config.js</h4> <p>Create a riant.config.js file in the root directory</p> <ul><li>Code structure</li></ul> <div class="language- extra-class"><pre class="language-text"><code>+-- your-project
|   +-- riant.config.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src
</code></pre></div><ul><li>Schema</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  alias<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Function'</span><span class="token punctuation">,</span> <span class="token string">'Object'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  babelPlugins<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Function'</span><span class="token punctuation">,</span> <span class="token string">'Array'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  chainWebpack<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token string">'Function'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  configureWebpack<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token string">'Function'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  css<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'object'</span><span class="token punctuation">,</span>
    properties<span class="token operator">:</span> <span class="token punctuation">{</span>
      sourceMap<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'boolean'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      loaderOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'object'</span><span class="token punctuation">,</span>
        properties<span class="token operator">:</span> <span class="token punctuation">{</span>
          css<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'object'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          less<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'object'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          stylus<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'object'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          postcss<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'object'</span> <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  define<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Function'</span><span class="token punctuation">,</span> <span class="token string">'Object'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  devServer<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Function'</span><span class="token punctuation">,</span> <span class="token string">'Object'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  extensions<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Function'</span><span class="token punctuation">,</span> <span class="token string">'Array'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  externals<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Function'</span><span class="token punctuation">,</span> <span class="token string">'Array'</span><span class="token punctuation">,</span> <span class="token string">'RegExp'</span><span class="token punctuation">,</span> <span class="token string">'Object'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  filenameHashing<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'boolean'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  jest<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Function'</span><span class="token punctuation">,</span> <span class="token string">'Object'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  pages<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'object'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  parallel<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'boolean'</span><span class="token punctuation">,</span> <span class="token string">'number'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  paths<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Function'</span><span class="token punctuation">,</span> <span class="token string">'Object'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  riantPlugins<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">instanceof</span><span class="token operator">:</span> <span class="token string">'Array'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  useEslintrc<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'boolean'</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>Configure webpack，learn more <a href="/riant/config/">Config Reference</a></li></ul> <h4 id="start-the-dev-server"><a href="#start-the-dev-server" class="header-anchor">#</a> Start the Dev Server</h4> <div class="language-bash extra-class"><pre class="language-bash"><code>$ <span class="token function">npm</span> start
</code></pre></div><h4 id="build-your-app"><a href="#build-your-app" class="header-anchor">#</a> Build your App</h4> <div class="language-bash extra-class"><pre class="language-bash"><code>$ <span class="token function">npm</span> run build
</code></pre></div><h2 id="template"><a href="#template" class="header-anchor">#</a> Template</h2> <h3 id="create-project"><a href="#create-project" class="header-anchor">#</a> Create project</h3> <h4 id="create-a-project-with-a-template"><a href="#create-a-project-with-a-template" class="header-anchor">#</a> Create a project with a template</h4> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># npm 5.2+</span>
npx create-react-app my-app --template riant
<span class="token comment"># npm 6+</span>
<span class="token function">npm</span> init react-app my-app --template riant
<span class="token comment"># Yarn 0.25+</span>
<span class="token function">yarn</span> create react-app my-app --template riant
</code></pre></div><h4 id="start-the-dev-server-2"><a href="#start-the-dev-server-2" class="header-anchor">#</a> Start the Dev Server</h4> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> my-app
<span class="token function">npm</span> start
</code></pre></div><h3 id="templates"><a href="#templates" class="header-anchor">#</a> Templates</h3> <table><thead><tr><th>Template</th> <th>Version</th> <th>Docs</th> <th>Usage</th></tr></thead> <tbody><tr><td><a href="packages/cra-template-riant"><code>riant</code></a></td> <td><a href="https://www.npmjs.com/package/cra-template-riant" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/cra-template-riant.svg?style=flat-square" alt="npm"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td> <td><a href="packages/cra-template-riant#readme"><img src="https://img.shields.io/badge/API%20Docs-markdown-lightgrey.svg?style=flat-square" alt=""></a></td> <td>npm init react-app my-app --template riant</td></tr> <tr><td><a href="packages/cra-template-riant-antd"><code>riant-antd</code></a></td> <td><a href="https://www.npmjs.com/package/cra-template-riant-antd" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/cra-template-riant-antd.svg?style=flat-square" alt="npm"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td> <td><a href="packages/cra-template-riant-antd#readme"><img src="https://img.shields.io/badge/API%20Docs-markdown-lightgrey.svg?style=flat-square" alt=""></a></td> <td>npm init react-app my-app --template riant-antd</td></tr> <tr><td><a href="packages/cra-template-riant-order-management"><code>riant-order-management</code></a></td> <td><a href="https://www.npmjs.com/package/cra-template-riant-order-management" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/cra-template-riant-order-management.svg?style=flat-square" alt="npm"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></td> <td><a href="packages/cra-template-riant-order-management#readme"><img src="https://img.shields.io/badge/API%20Docs-markdown-lightgrey.svg?style=flat-square" alt=""></a></td> <td>npm init react-app my-app --template riant-order-management</td></tr></tbody></table></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div></div><div class="global-ui"></div></div>
    <script src="/riant/assets/js/app.c1a7218f.js" defer></script><script src="/riant/assets/js/2.d60fca52.js" defer></script><script src="/riant/assets/js/7.57f72445.js" defer></script>
  </body>
</html>
